import Enlarge from "./enlarge.js";

export default class details {
    goodsdetail;
    res
    id
    username
    good_data
    en
    constructor() {
        this.usermsg = JSON.parse(sessionStorage.getItem("usermsg"));
        this.username = document.getElementById("username");
        if (this.usermsg) this.writeUserMsg();
        this.cart_data = this.getCartData();
        this.id = location.hash.split("=")[1];
        this.data = null;
        // this.shopNum = 1;
        this.selectProList()
        this.body = document.querySelector("body")
        this.magnifier = document.getElementById("magnifier")
        this.cite = document.getElementById("cite")
        this.pro = document.getElementById("pro")
    }
    async selectProList() {
        fetch("http://localhost:4022/prolist").then(res => res.json())
            .then(res => {
                console.log(res)
                this.render(res)
                this.rendertitle(res)
                this.renderpro(res)
                this.data=res
                
            })
    }
    // render(){

    // }
    async render(res) {
        var goodsdetail = res.filter(item => {
            if (Number(item.proID) === Number(this.id)) return item
        })
        var str = goodsdetail.map(item => {
            return `
            <div class="box" id="box">
            <div class="show"><img src="${item.src}" alt=""><div class="mask"></div>
            </div>
            <div class="list">
              <img class="active" src="${item.src}" data-show="${item.src}" data-enlarge="${item.src} alt="">
              <img src="${item.src}" data-show="${item.src}" data-enlarge="${item.src}" alt="">
            </div>
            <div class="enlarge">
              <img src="${item.src}" alt="">
            </div>
          </div>
            `
        }).join("");
        this.magnifier.innerHTML = str;
        this.en = new Enlarge('#magnifier')
    }
    async rendertitle(res) {
        var goodsdetail = res.filter(item => {
            if (Number(item.proID) === Number(this.id)) return item
        })

        var strcite = goodsdetail.map(item => {
            return `
        <a >商城首页></a>
        <a><cite id="titleCite">${item.title}</cite></a>
        `
        }).join("");
        this.cite.innerHTML = strcite;
    }
    async renderpro(res) {
        var goodsdetail = res.filter(item => {
            if (Number(item.proID) === Number(this.id)) return item
        })

        var strpro = goodsdetail.map(item => {
            return `
        <p class="state">中国&nbsp;&nbsp;|&nbsp;&nbsp;<a ef="/category-b2085.html" target="_blank">紫一</a></p>
        <h1 class="title">${item.title}</h1>
        <div class="p-info">
            <dl>
                <dt>售价：</dt>
                <dd>
                    <span class="price">￥${item.price}</span>
                    <span class="layui-badge tag">直降${item.no_price - item.price}元</span>
                    <span class="layui-badge tag">包邮</span>
                    <span class="layui-badge tag">货到付款</span>
                </dd>
            </dl>
            <dl class="p-line p-send">
                <dt>手机下单送积分：</dt>
                <dd>
                    <span>${item.price}</span>
                </dd>
            </dl>
            <dl>
                <dt>促销：</dt>
                <dd>
                    <span class="layui-badge tag">买2送1</span>
                </dd>
                <dd>
                    <span class="layui-badge tag">买3送2</span>
                </dd>
                <dd>
                    <span class="layui-badge tag">买5送5</span>
                </dd>
            </dl>
            <dl>
                <dt>评价：</dt>
                <dd>
                    <a ref="/comment/10910.html" class="red"><strong>★★★★★&nbsp;&nbsp;95.53%</strong></a>
                </dd>
            </dl>
            <dl>
              
                <dd>
                    
                </dd>
            </dl>
            </div>
            <div class="p-btn" data-id="${item.proID}"  style="margin-top: 80px;">
            <a  id="gocar" data-id="${item.proID}" rel="nofollow" class="layui-btn layui-btn-lg layui-btn-primary btn-buy add_pay"
            style="margin-left: 70px;"><strong data-id="${item.proID}">立即购买 ￥${item.price}</strong></a>
            </div>
            <div class="doment">7天无忧退货&nbsp;&nbsp;|&nbsp;&nbsp;专业营养师</div>
            
            `
        }).join("");

        this.pro.innerHTML = strpro;
        this.gocar= document.getElementById("gocar")
        //加入购物车
        this.gocar.addEventListener("click",e=>this.clickHandler(e));
    }
    clickHandler(e){
        e.preventDefault()
        console.log(e.target.getAttribute("data-id"));
     
       let id=e.target.getAttribute("data-id")
        let res=this.search(id)
        console.log(res,"sssss");
        if(res){
          
            this.addCar(id,res)
            console.log(id,res);
        }
        if(this.usermsg) {
         this.goCar(this.id)   
        }
        else{
        alert("未登录！！")
        this.goLogin();
    }
    
    }
    //加入购物车
    search(id) {
         let res = null;
         console.log(id,this.data);
        let good_data = this.data
        console.log(good_data);
        good_data.some(item => {
            if (Number(id) === Number(item.proID)) {
                res = item;
                return true;
            }
        })
        console.log(res);
        return res;
    }
//获取商品放在localStorage信息6
    getCartData() {
        console.log("222");
        try {
            let data = JSON.parse(localStorage.getItem("cart"))
            if (!data) return 
            return data;
        } catch (e) {
            return ;
        }
    }
    addCar(id, data) {
        // 判断当前的id是否存在于购物车列表之中
        if (id in this.cart_data) {
            // 如果购物车存在商品，将购物车数量+将要加入的商品数量; 
            // this.cart_data[id].count += this.shopNum;
        } else {
            // 如果不存在就放入一个拥有多个商品数量的初始数据; 
            // data.count = this.shopNum;
            this.cart_data[id] = data;
        }
        this.save();
    }
    save() {
        console.log("save");
        console.log(this.cart_data,"222");
        localStorage.setItem("cart", JSON.stringify(this.cart_data));
    }

    goLogin(){
            location.href="./signIn.html";
        }
    goCar(id){
        location.href="./car.html#id="+id;
    }

    writeUserMsg() {
        this.username.innerHTML = this.usermsg.username
        this.username.className = "login"
        // console.log("登录");
    }
}



new details();